<template>
  <!-- html与css布局 -->
  <div class="layout">

    <!-- 伸缩盒布局 -->
    <!-- 第一行 -->
    <div class="bg">
      抗击疫情，众志成城
      <div>
        肺炎疫情实时动态播报
      </div>
    </div>
    <div class="title">9月4日</div>
    <div class="first">
      <div class="c1">
        <div class="desc">境外输入</div>

        <div >较昨日<span class="num1">+8</span></div>
      </div>
      <div class="c2">
        <div class="desc">无症状感染者</div>

        <div >较昨日<span class="num2">+8</span></div>
      </div>
        <div class="c3">
        <div class="desc">现有确诊</div>
        <div >较昨日<span class="num3">-74</span></div>
      </div>
      <div class="c4">
        <div class="desc">累计确诊</div>
        <div >较昨日<span class="num4">-21</span></div>
      </div>
        <div class="c5">
        <div class="desc">累计死亡</div>
        <div >较昨日<span class="num5">+3</span></div>
      </div>
        <div class="c6">
        <div class="desc">累计治愈</div>
        <div >较昨日<span class="num6">+101</span></div>
      </div>

      
    </div>
    <!-- 第二行 -->
    <div class="title"> 截止：9月4日</div>
    <div class="second">
      <div class="c1">
        <div class="num1">2517</div>
        <div class="desc">境外输入</div>
      </div>
      <div class="c2">
        <div class="num2">353</div>
        <div class="desc">无症状感染者</div>
      </div>
      <div class="c3">
        <div class="num3">539</div>
        <div class="desc">现有确诊</div>       
      </div>
      <div class="c4">
        <div class="num4">90431</div>
       <div class="desc">累积确诊</div>
      </div>
      <div class="c5">
        <div class="num5">4733</div>
        <div class="desc">累积死亡</div>
      </div>
      <div class="c6">
        <div class="num6">85158</div>
        <div class="desc">累积治愈</div>
      </div>

    </div>

    <!-- 国内病例 -->

     <div class="list1">
       <!-- 头部 -->
      <div class="latest1">国内疫情查询
        <div class="find" >
       <el-form :inline="true" size="max" >
        <el-form-item >
           <el-input placeholder="请输入想要查询的省份" prefix-icon="el-icon-search" v-model="param1.province"  > </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadEpidemicData">搜索</el-button>
        </el-form-item>
       </el-form>
      </div>
      </div>
     </div>
     <div class="list">
      <div class="header">
        <div>省份</div>
        <div>地区</div>
        <div>新增确诊</div>
        <div>新增疑似</div>
        <div>新增死亡</div>
        <div>新增治愈</div>
        <div>境外输入</div>
      </div>
      <!-- 行 -->


     <!-- 行 -->
      
      <div class="item" v-for="item in epidemics.list" :key="item.id">
        <div>{{item.province}}</div>
        <div>{{item.city}}</div>
        <div style="color:#dd837f">{{item.confirmed}}</div>
        <div style="color:#ffa352">{{item.suspected}}</div>
        <div style="color:#333333">{{item.dead}}</div>
        <div style="color:#34aa70">{{item.cure}}</div>
        <div style="color:#e44a3d">{{item.outside}}</div>
      </div>
    </div>
   <!-- 最新进展 -->
    <!-- {{articles}} -->
    <div class="latest">最新进展</div>
    <div class="find" >
       <el-form :inline="true" size="max" >
        <el-form-item >
           <el-input placeholder="请输入想要查询文章标题" prefix-icon="el-icon-search" v-model="param.title"  > </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadArticleData">搜索</el-button>
        </el-form-item>
       </el-form>
      </div>
    <div class="news_list">
      <!-- 新闻 -->
      <div class="news" v-for="(article,index) in articles.list" :key="article.id" @click="toDetails(article)">
        <div class="time">
          <span class="circle"></span>
          <span class="latest" v-if="index === 0">最新</span>
          <strong>{{article.publishTime | fmtDate}}</strong>
        </div>
        <!-- <div class="content" v-html="article.content"> </div> -->
        <div class="content">
          {{article.title}}
        </div>
      </div>
    </div>
 <!-- 分页 -->
    <el-pagination
      v-if="articles.total > param.pageSize"
      layout="prev, pager, next"
      @current-change="currentChangeHandler"
      :current-page="param.page"
      :page-size="param.pageSize"
      :total="articles.total">
    </el-pagination>

<!-- 模态框 -->
    <el-dialog
      title="最新进展"
      :visible.sync="dialogVisible"
      width="80%">
      <div>
          <strong>{{article.publishTime | fmtDate}}</strong>
        </div>
      <div v-html="article.content"></div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {get} from '@/utils/request'
export default {
  data(){
    return {
      dialogVisible:false,
      param:{
        page:1,
        pageSize:10,
        categoryId:3
      },
      param1:{
        page:1,
        pageSize:20,
        
      },
      epidemics:{},
      articles:{},
      article:{}    // 当前这篇文章
    }
  },
  created(){
    this.loadArticleData();
    this.loadEpidemicData();
  },
  methods:{
    // 打开详情
    toDetails(article){
      this.article = article;
      this.dialogVisible = true;
    },
     // 加载新闻资讯
    loadArticleData(){
      let url = "/article/pageQuery";
      get(url,this.param).then(response => {
        this.articles = response.data;
      });
    },
    //加载所有疫情数据
    loadEpidemicData(){
      let url = "/epidemic/pageQuery";
      get(url,this.param1).then(response => {
        this.epidemics = response.data;
      })
    },
    // 翻页
    currentChangeHandler(page){
      this.param.page = page;
      this.loadArticleData();
    }
  }
}
</script>


<style scoped>
/* 最新进展 */
.list1{
  background-image: url("../../assets/bg2.png");
background-size: cover;
}
.latest1 {
  display: inline-block;
  background-color: #76c6ec;
  color: #ffffff;
  padding: 0.4em;
  font-size: 16px;
  border-radius: 3px;
  line-height: 1.6em;
   text-align: center;
}
.latest {
  display: inline-block;
  background-color: #f43b3b;
  color: #ffffff;
  padding: 0.4em;
  font-size: 16px;
  border-radius: 3px;
  line-height: 1.6em;
   text-align: center;
}
.bg{
    background-image: url("../../assets/bg1.png");
    background-position: center;
    background-size: cover;

    margin: -.5em;
    margin-bottom: 1em;
    padding: 1em;
    color: #ffffff;
    font-size: 24px;
}
.bg >.div{
    text-align: end;
}
.news_list {
  background-color: #f8f8f8;
  padding: 1em;
}
.news_list > .news {
  margin-top: .5em;
}
.news_list > .news > .time {
  line-height: 2em;
}
.news_list > .news > .content {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 1em;
  color: #666666;
  line-height: 1.5em;
  font-size: 16px;
}
.news_list .circle {
  display: inline-block;    /*行内块 */
  width: 10px;
  height: 10px;
  background-color: #005dff;
  border-radius: 50%;
}
.news_list .latest {
  display: inline-block;
  background-color: #f43b3b;
  color: #ffffff;
  padding: 0 .4em;
  font-size: 12px;
  border-radius: 3px;
  line-height: 1.6em;
}
/* 各地疫情 */
.find{
  text-align: center;
}
.list > .header,
.list > .item {
  display: flex;
  flex-direction: row;
  text-align: center;
}
.list > .header > div,
.list > .item > div {
  flex: 1;
}

.list > .header > div {
  line-height: 60px;
}
.list > .header > div:nth-child(1) {
  background-color: #e0e1fd;
}
.list > .header > div:nth-child(2) {
  background-color:#ddecff;
}
.list > .header > div:nth-child(3) {
  background-color: #dd837f;
}
.list > .header > div:nth-child(4) {
  background-color: #f4d3aa;
}
.list > .header > div:nth-child(5) {
  background-color: #d2d2d2;
}
.list > .header > div:nth-child(6) {
  background-color: #c5eab4;
}
.list > .header > div:nth-child(7) {
  background-color:#fdcccb;
}

.list > .item {
  border-bottom: 1px solid #ededed;
}
.list > .item > div {
  line-height: 46px;
}


/*scoped 表示 css样式只能在当前的模块中使用 */
.first{
  display: flex;
  flex-direction: row;
  justify-content: space-between;   /*空白区域放在哪里？ space-between空白介于中间*/
  text-align: center;
}

.first > div {
  height:100px;
  width: 33%;
  flex: 1;    /*子元素占据父元素的剩余空间的一份*/ 

  background-color: #eefaff;
  padding:.5em; /*.5em  当前字体大小的.5倍， 如果字体14px,.5em = 7px*/
  border-radius: 5px;
}

.first .num1,
.second .num1 {
  color: #ffa352;
  font-weight: bold;
  line-height: 45px;

}
.first .num2,
.second .num2 {
  color: #791618;
  font-weight: bold;
  line-height: 45px;

}
.first .num3,
.second .num3 {
  color: #e44a3d;
  font-weight: bold;
  line-height: 45px;

}
.first .num4,
.second .num4{
  color: #a31d13;
  font-weight: bold;
  line-height: 45px;
}
.first .num5,
.second .num5{
  color:#333333;
  font-weight: bold;
  line-height: 45px;
}
.first .num6,
.second .num6{
  color: #34aa70;
  font-weight: bold;
  line-height: 45px;
}
/* 第二行 */
.second {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;

}
.second > div {
  width: 33%;
  height: 100px;

  border-radius: 5px;
}
.first .c1,
.second > .c1{
    background-color:#fcf4f0;
}
.first .c2,
.second > .c2{
    background-color:#faf2f6;
}


.first .c3,
.second > .c3{
    background-color:#fdf1f1;
}
.first .c4,
.second > .c4{
    background-color:#fdf1f1;
}
.first .c5,
.second > .c5{
    background-color:#f3f6f8;
}
.first .c6,
.second > .c6{
    background-color:#f1f8f4;
}
.second > div:nth-child(1),
.second > div:nth-child(2),
.second > div:nth-child(3) {
  margin-bottom: .5em;
}

.title {
  line-height: 2em;
  color: #999999;
}

</style>